<svg viewBox='0 0 800 320' class='fm-chart'>
  <style type='text/css'>
  <![CDATA[
  .fm-chart text, .fm-tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font: 10px sans-serif;
  }

  .fm-chart .axis .stroke {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .tick {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .label, .axis .title {
    fill: #666;
  }

  .fm-chart .axis .label {
    font-size: 10px;
  }

  .fm-chart .axis .title {
    font-size: 10px;
  }

  .fm-chart .chart-title {
    font-size: 12px;
    font-weight: bold;
  }

  .fm-chart .chart-subtitle {
    font-size: 10px;
  }

  .fm-chart text.label {
    fill: #666;
  }

  .fm-chart .legend text {
    font-size: 10px;
    fill: #333;
  }

  .fm-chart .legend text.title {
    fill: #666;
  }

  .fm-chart .line {
    fill: none;
    stroke: #000;
  }

  .fm-chart .area {
    opacity: 0.8;
  }

  .fm-chart .grid .gridline {
    stroke: #ddd;
    stroke-width: 0.02em;
  }

  .fm-chart .bar,
  .fm-chart .point,
  .fm-chart .area {
    fill: #000;
  }

  .fm-chart .bar.color6,
  .fm-chart .point.color6,
  .fm-chart .area.color6 {
    fill: #db843d;
  }

  .fm-chart .lines .line.color6 {
    strok: #db843d;
  }

  .fm-chart .bar.color5,
  .fm-chart .point.color5,
  .fm-chart .area.color5 {
    fill: #3d96ae;
  }

  .fm-chart .lines .line.color5 {
    stroke: #3d96ae;
  }

  .fm-chart .bar.color4,
  .fm-chart .point.color4,
  .fm-chart .area.color4 {
    fill: #80699b;
  }

  .fm-chart .line.color4 {
    stroke: #80699b;
  }

  .fm-chart .bar.color3,
  .fm-chart .point.color3,
  .fm-chart .area.color3 {
    fill: #89a54e;
  }

  .fm-chart .line.color3 {
    stroke: #89a54e;
  }

  .fm-chart .bar.color2,
  .fm-chart .point.color2,
  .fm-chart .area.color2 {
    fill: #aa4643;
  }

  .fm-chart .line.color2 {
    stroke: #aa4643;
  }

  .fm-chart .bar.color1,
  .fm-chart .point.color1,
  .fm-chart .area.color1 {
    fill: #4572a7;
  }

  .fm-chart .line.color1 {
    stroke: #4572a7;
  }

  .fm-chart.bar.vertical .axis.left .stroke,
  .fm-chart.bar.vertical .axis.left .tick,
  .fm-chart.bar.vertical .axis.right .stroke,
  .fm-chart.bar.vertical .axis.right .tick {
    display: none;
  }

  .fm-tooltip {
    text-align: center;
    padding: 5px 7px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    font-size: 13px;
  }
  ]]>
  </style>
  <g class='axis bottom'>
    <text x='744.791667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Dec</text>
    <text x='684.375000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Nov</text>
    <text x='623.958333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Oct</text>
    <text x='563.541667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Sep</text>
    <text x='503.125000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Aug</text>
    <text x='442.708333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jul</text>
    <text x='382.291667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jun</text>
    <text x='321.875000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >May</text>
    <text x='261.458333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Apr</text>
    <text x='201.041667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Mar</text>
    <text x='140.625000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Feb</text>
    <text x='80.208333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jan</text>
    <line x1='50.000000' y1='295.000000' x2='50.000000' y2='290.000000' class='tick' />
    <line x1='775.000000' y1='295.000000' x2='775.000000' y2='290.000000' class='tick' />
    <line x1='714.583333' y1='295.000000' x2='714.583333' y2='290.000000' class='tick' />
    <line x1='654.166667' y1='295.000000' x2='654.166667' y2='290.000000' class='tick' />
    <line x1='593.750000' y1='295.000000' x2='593.750000' y2='290.000000' class='tick' />
    <line x1='533.333333' y1='295.000000' x2='533.333333' y2='290.000000' class='tick' />
    <line x1='472.916667' y1='295.000000' x2='472.916667' y2='290.000000' class='tick' />
    <line x1='412.500000' y1='295.000000' x2='412.500000' y2='290.000000' class='tick' />
    <line x1='352.083333' y1='295.000000' x2='352.083333' y2='290.000000' class='tick' />
    <line x1='291.666667' y1='295.000000' x2='291.666667' y2='290.000000' class='tick' />
    <line x1='231.250000' y1='295.000000' x2='231.250000' y2='290.000000' class='tick' />
    <line x1='170.833333' y1='295.000000' x2='170.833333' y2='290.000000' class='tick' />
    <line x1='110.416667' y1='295.000000' x2='110.416667' y2='290.000000' class='tick' />
    <line x1='50.000000' y1='295.000000' x2='775.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis left'>
    <text x='40.000000' y='295.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >-30.0</text>
    <text x='40.000000' y='254.571429' style='text-anchor:end; dominant-baseline:middle;' class='label' >-21.4</text>
    <text x='40.000000' y='214.142857' style='text-anchor:end; dominant-baseline:middle;' class='label' >-12.9</text>
    <text x='40.000000' y='173.714286' style='text-anchor:end; dominant-baseline:middle;' class='label' >-4.29</text>
    <text x='40.000000' y='133.285714' style='text-anchor:end; dominant-baseline:middle;' class='label' >4.29</text>
    <text x='40.000000' y='92.857143' style='text-anchor:end; dominant-baseline:middle;' class='label' >12.9</text>
    <text x='40.000000' y='52.428571' style='text-anchor:end; dominant-baseline:middle;' class='label' >21.4</text>
    <text x='40.000000' y='12.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >30.0</text>
    <line x1='50.000000' y1='295.000000' x2='55.000000' y2='295.000000' class='tick' />
    <line x1='50.000000' y1='254.571429' x2='55.000000' y2='254.571429' class='tick' />
    <line x1='50.000000' y1='214.142857' x2='55.000000' y2='214.142857' class='tick' />
    <line x1='50.000000' y1='173.714286' x2='55.000000' y2='173.714286' class='tick' />
    <line x1='50.000000' y1='133.285714' x2='55.000000' y2='133.285714' class='tick' />
    <line x1='50.000000' y1='92.857143' x2='55.000000' y2='92.857143' class='tick' />
    <line x1='50.000000' y1='52.428571' x2='55.000000' y2='52.428571' class='tick' />
    <line x1='50.000000' y1='12.000000' x2='55.000000' y2='12.000000' class='tick' />
    <line x1='50.000000' y1='12.000000' x2='50.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='legend'>
    <text x='750.000000' y='275.000000' style='text-anchor:end; dominant-baseline:text-after-edge;' class='title' >Average Temperature</text>
    <circle cx='75.000000' cy='273.800000' r='3.000000' class='point color1' fm:label='' fm:series='', style=''></circle>
    <text x='83.000000' y='273.800000' style='text-anchor:start; dominant-baseline:central;' class='label' >Tokyo</text>
    <circle cx='125.000000' cy='273.800000' r='3.000000' class='point color2' fm:label='' fm:series='', style=''></circle>
    <text x='133.000000' y='273.800000' style='text-anchor:start; dominant-baseline:central;' class='label' >New York</text>
    <circle cx='193.000000' cy='273.800000' r='3.000000' class='point color3' fm:label='' fm:series='', style=''></circle>
    <text x='201.000000' y='273.800000' style='text-anchor:start; dominant-baseline:central;' class='label' >Berlin</text>
    <circle cx='249.000000' cy='273.800000' r='3.000000' class='point color4' fm:label='' fm:series='', style=''></circle>
    <text x='257.000000' y='273.800000' style='text-anchor:start; dominant-baseline:central;' class='label' >London</text>
  </g>
  <g class='lines'>
    <circle cx='744.791667' cy='108.220000' r='3.000000' class='point color1' fm:label='Dec: 9.600000' fm:series='Tokyo', style=''></circle>
    <circle cx='684.375000' cy='87.938333' r='3.000000' class='point color1' fm:label='Nov: 13.900000' fm:series='Tokyo', style=''></circle>
    <circle cx='623.958333' cy='67.185000' r='3.000000' class='point color1' fm:label='Oct: 18.300000' fm:series='Tokyo', style=''></circle>
    <circle cx='563.541667' cy='43.601667' r='3.000000' class='point color1' fm:label='Sep: 23.300000' fm:series='Tokyo', style=''></circle>
    <circle cx='503.125000' cy='28.508333' r='3.000000' class='point color1' fm:label='Aug: 26.500000' fm:series='Tokyo', style=''></circle>
    <circle cx='442.708333' cy='34.640000' r='3.000000' class='point color1' fm:label='Jul: 25.200000' fm:series='Tokyo', style=''></circle>
    <circle cx='382.291667' cy='52.091667' r='3.000000' class='point color1' fm:label='Jun: 21.500000' fm:series='Tokyo', style=''></circle>
    <circle cx='321.875000' cy='67.656667' r='3.000000' class='point color1' fm:label='May: 18.200000' fm:series='Tokyo', style=''></circle>
    <circle cx='261.458333' cy='85.108333' r='3.000000' class='point color1' fm:label='Apr: 14.500000' fm:series='Tokyo', style=''></circle>
    <circle cx='201.041667' cy='108.691667' r='3.000000' class='point color1' fm:label='Mar: 9.500000' fm:series='Tokyo', style=''></circle>
    <circle cx='140.625000' cy='120.955000' r='3.000000' class='point color1' fm:label='Feb: 6.900000' fm:series='Tokyo', style=''></circle>
    <circle cx='80.208333' cy='120.483333' r='3.000000' class='point color1' fm:label='Jan: 7.000000' fm:series='Tokyo', style=''></circle>
    <path stroke-width='2.000000' class='line color1' style='' d='M744.791667 108.220000 L684.375000 87.938333 L623.958333 67.185000 L563.541667 43.601667 L503.125000 28.508333 L442.708333 34.640000 L382.291667 52.091667 L321.875000 67.656667 L261.458333 85.108333 L201.041667 108.691667 L140.625000 120.955000 L80.208333 120.483333 ' />
    <circle cx='744.791667' cy='141.708333' r='3.000000' class='point color2' fm:label='Dec: 2.500000' fm:series='New York', style=''></circle>
    <circle cx='684.375000' cy='112.936667' r='3.000000' class='point color2' fm:label='Nov: 8.600000' fm:series='New York', style=''></circle>
    <circle cx='623.958333' cy='86.995000' r='3.000000' class='point color2' fm:label='Oct: 14.100000' fm:series='New York', style=''></circle>
    <circle cx='563.541667' cy='58.695000' r='3.000000' class='point color2' fm:label='Sep: 20.100000' fm:series='New York', style=''></circle>
    <circle cx='503.125000' cy='39.828333' r='3.000000' class='point color2' fm:label='Aug: 24.100000' fm:series='New York', style=''></circle>
    <circle cx='442.708333' cy='36.526667' r='3.000000' class='point color2' fm:label='Jul: 24.800000' fm:series='New York', style=''></circle>
    <circle cx='382.291667' cy='49.733333' r='3.000000' class='point color2' fm:label='Jun: 22.000000' fm:series='New York', style=''></circle>
    <circle cx='321.875000' cy='73.316667' r='3.000000' class='point color2' fm:label='May: 17.000000' fm:series='New York', style=''></circle>
    <circle cx='261.458333' cy='100.201667' r='3.000000' class='point color2' fm:label='Apr: 11.300000' fm:series='New York', style=''></circle>
    <circle cx='201.041667' cy='126.615000' r='3.000000' class='point color2' fm:label='Mar: 5.700000' fm:series='New York', style=''></circle>
    <circle cx='140.625000' cy='149.726667' r='3.000000' class='point color2' fm:label='Feb: 0.800000' fm:series='New York', style=''></circle>
    <circle cx='80.208333' cy='154.443333' r='3.000000' class='point color2' fm:label='Jan: -0.200000' fm:series='New York', style=''></circle>
    <path stroke-width='2.000000' class='line color2' style='' d='M744.791667 141.708333 L684.375000 112.936667 L623.958333 86.995000 L563.541667 58.695000 L503.125000 39.828333 L442.708333 36.526667 L382.291667 49.733333 L321.875000 73.316667 L261.458333 100.201667 L201.041667 126.615000 L140.625000 149.726667 L80.208333 154.443333 ' />
    <circle cx='80.208333' cy='157.745000' r='3.000000' class='point color3' fm:label='Jan: -0.900000' fm:series='Berlin', style=''></circle>
    <circle cx='140.625000' cy='150.670000' r='3.000000' class='point color3' fm:label='Feb: 0.600000' fm:series='Berlin', style=''></circle>
    <circle cx='201.041667' cy='136.991667' r='3.000000' class='point color3' fm:label='Mar: 3.500000' fm:series='Berlin', style=''></circle>
    <circle cx='261.458333' cy='113.880000' r='3.000000' class='point color3' fm:label='Apr: 8.400000' fm:series='Berlin', style=''></circle>
    <circle cx='321.875000' cy='89.825000' r='3.000000' class='point color3' fm:label='May: 13.500000' fm:series='Berlin', style=''></circle>
    <circle cx='382.291667' cy='73.316667' r='3.000000' class='point color3' fm:label='Jun: 17.000000' fm:series='Berlin', style=''></circle>
    <circle cx='442.708333' cy='65.770000' r='3.000000' class='point color3' fm:label='Jul: 18.600000' fm:series='Berlin', style=''></circle>
    <circle cx='503.125000' cy='69.071667' r='3.000000' class='point color3' fm:label='Aug: 17.900000' fm:series='Berlin', style=''></circle>
    <circle cx='563.541667' cy='86.051667' r='3.000000' class='point color3' fm:label='Sep: 14.300000' fm:series='Berlin', style=''></circle>
    <circle cx='623.958333' cy='111.050000' r='3.000000' class='point color3' fm:label='Oct: 9.000000' fm:series='Berlin', style=''></circle>
    <circle cx='684.375000' cy='135.105000' r='3.000000' class='point color3' fm:label='Nov: 3.900000' fm:series='Berlin', style=''></circle>
    <circle cx='744.791667' cy='148.783333' r='3.000000' class='point color3' fm:label='Dec: 1.000000' fm:series='Berlin', style=''></circle>
    <path stroke-width='2.000000' class='line color3' style='' d='M80.208333 157.745000 L140.625000 150.670000 L201.041667 136.991667 L261.458333 113.880000 L321.875000 89.825000 L382.291667 73.316667 L442.708333 65.770000 L503.125000 69.071667 L563.541667 86.051667 L623.958333 111.050000 L684.375000 135.105000 L744.791667 148.783333 ' />
    <circle cx='80.208333' cy='135.105000' r='3.000000' class='point color4' fm:label='Jan: 3.900000' fm:series='London', style=''></circle>
    <circle cx='140.625000' cy='133.690000' r='3.000000' class='point color4' fm:label='Feb: 4.200000' fm:series='London', style=''></circle>
    <circle cx='201.041667' cy='126.615000' r='3.000000' class='point color4' fm:label='Mar: 5.700000' fm:series='London', style=''></circle>
    <circle cx='261.458333' cy='113.408333' r='3.000000' class='point color4' fm:label='Apr: 8.500000' fm:series='London', style=''></circle>
    <circle cx='321.875000' cy='97.371667' r='3.000000' class='point color4' fm:label='May: 11.900000' fm:series='London', style=''></circle>
    <circle cx='382.291667' cy='81.806667' r='3.000000' class='point color4' fm:label='Jun: 15.200000' fm:series='London', style=''></circle>
    <circle cx='442.708333' cy='73.316667' r='3.000000' class='point color4' fm:label='Jul: 17.000000' fm:series='London', style=''></circle>
    <circle cx='503.125000' cy='75.203333' r='3.000000' class='point color4' fm:label='Aug: 16.600000' fm:series='London', style=''></circle>
    <circle cx='563.541667' cy='86.523333' r='3.000000' class='point color4' fm:label='Sep: 14.200000' fm:series='London', style=''></circle>
    <circle cx='623.958333' cy='104.918333' r='3.000000' class='point color4' fm:label='Oct: 10.300000' fm:series='London', style=''></circle>
    <circle cx='684.375000' cy='122.370000' r='3.000000' class='point color4' fm:label='Nov: 6.600000' fm:series='London', style=''></circle>
    <circle cx='744.791667' cy='130.860000' r='3.000000' class='point color4' fm:label='Dec: 4.800000' fm:series='London', style=''></circle>
    <path stroke-width='2.000000' class='line color4' style='' d='M80.208333 135.105000 L140.625000 133.690000 L201.041667 126.615000 L261.458333 113.408333 L321.875000 97.371667 L382.291667 81.806667 L442.708333 73.316667 L503.125000 75.203333 L563.541667 86.523333 L623.958333 104.918333 L684.375000 122.370000 L744.791667 130.860000 ' />
  </g>
</svg>
